<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="nearby_shared_icons.html">
<link rel="import" href="nearby_device_icon.html">

<dom-module id="nearby-device">
  <template>
    <style>
      #wrapper {
        align-items: center;
        background-color: var(--cr-card-background-color);
        border: 1px solid var(--cros-button-stroke-color-secondary);
        border-radius: 8px;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        height: 40px;
        margin-block-end: 6px;
        padding-block-end: 6px;
        padding-block-start: 6px;
        padding-inline-end: 9px;
        padding-inline-start: 9px;
      }

      :host(:focus) {
        outline: none;
      }

      :host(:focus) #wrapper,
      :host([is-selected]:focus) #wrapper {
        border-color: var(--cros-color-secondary);
      }

      :host([is-selected]) #wrapper {
        border-color: var(--cros-button-icon-color-secondary);
      }

      :host([is-selected]) #done {
        display: flex;
      }

      :host([is-selected]) #name {
        color: var(--cros-text-color-prominent);
      }

      #done {
        color: var(--cros-text-color-prominent);
        display: none;
        flex-shrink: 0;
        height: 17px;
        width: 17px;
      }

      #icon {
        --nearby-device-icon-size: 15px;
        flex-shrink: 0;
        height: var(--target-image-size);
        width: var(--target-image-size);
      }

      #share-target-image {
        border-radius: 50%;
        /* Hide the image until it's downloaded. */
        display: none;
        flex-shrink: 0;
        height: var(--target-image-size);
        width: var(--target-image-size);
      }

      #name {
        color: var(--cros-text-color-secondary);
        flex-grow: 1;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.3px;
        margin-inline-start: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>

    <div id="wrapper" title="[[shareTarget.name]]">
      <nearby-device-icon id="icon" share-target="[[shareTarget]]">
      </nearby-device-icon>
      <img is="cr-auto-img" id="share-target-image"
          auto-src="[[getTargetImageUrl_(shareTarget)]]">
      </img>
      <div id="name">[[shareTarget.name]]</div>
      <iron-icon id="done" icon="nearby-share:done"></iron-icon>
    </div>
  </template>
  <script src="nearby_device.js"></script>
</dom-module>
